<page-pagination>
    <page>
        <yield to="title">Pagination</yield>
        <yield to="content">
            <div class="box no-shadow">
                <p class="title">Pagination</p>
                <p class="subtitle">Pagination Component</p>
                <p>Think different. Data driven instead of directly operations on dom.</p>
                <hr>
                <div class="content { 'is-loading': parent.loading }">
                    current page is { parent.page }
                </div>
                <pagination index="{ parent.page }" count="{ parent.total }" loading="{ parent.loading }" page="{ parent.loadPage }"></pagination>
            </div>
        </yield>
    </page>
    <script>
        import '../components/page/page.html'
        import '../components/pagination.html'
        
        import preloader from '../../lib/preloader'

        this.total = 18 //total pages
        this.page = 1 //current page
        this.loading = false
        this.loadPage = (index) => {
            preloader.inc()
            this.loading = true
            this.page = index
            this.update()

            //simulate data loading...
            setTimeout(() => {
                this.loading = false
                this.update()
                preloader.dec()
            }, 1500)
        }

        this.loadPage(1)
    </script>
</page-pagination>